import{_ as I}from"./index.vue_vue_type_style_index_0_lang2.js";import{d as B,e as f,P as D,Q as z,R as i,$ as m,X as r,K as h,aE as p,a4 as g,S as b,a2 as Q,a5 as q,a8 as R,a9 as A}from"./elementPlusModules.js";import{_ as O}from"./index.js";import"./default.js";import"./vxeTableModules.js";import"./index.vue_vue_type_style_index_0_lang3.js";import"./vuedraggable.umd.js";import"./table2.js";import"./empty2.js";import"./messageUtils.js";import"./lodashModules.js";const V=s=>(R("data-v-82ebb5a9"),s=s(),A(),s),E=V(()=>i("p",null,"表格高度默认铺满父容器,因此父容器需要设置高度",-1)),G={style:{height:"80vh","box-sizing":"border-box"}},N={class:"custom_row"},H=B({__name:"Base",setup(s){const c=f(),y=f(`
<template>
  <div style="height: 70vh; box-sizing: border-box">
    <MerakXTable
      ref="tableRef"
      :columns-by-store="generateColumns()"
      :row-height="60"
      :column-type="['index', 'multiple', 'handle']"
      :batches="[{ type: 'delete', text: '批量删除' }]"
      :handles="[
        { type: 'details', text: '查看详情' },
        { type: 'delete', text: '删除', divided: true }
      ]"
      :batch-click="handleBatchClick"
      :handler-click="handleHanlerClick"
      :query-columns="handleQueryColumns"
      :query-options="handleQueryOptions"
      :query-data="handleQueryData"
      @config-change="handleConfigChange"
      @tool-click="handleToolClick"
    >
      <template #tools>
        <el-button @click="tableRef?.reloadData()">重新请求</el-button>
        <el-button @click="tableRef?.reloadTable()">刷新表格</el-button>
      </template>
      <template #column_5_child_1_child_2_default="{ row }">
        <div class="custom_row">自定义插槽 用于折行 {{ row["column_5_child_1_child_2"] }}</div>
      </template>
    </MerakXTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

import { ElButton } from "element-plus";

const tableRef = ref<MerakXTableInstance>();

const generateColumns = (length: number = 80) =>
  Array.from({ length }).map((_, index) => {
    const column: MerakXTableColumn = {
      field: \`column_\${index + 1}\`,
      title: \`column_\${index + 1}\`
    };
    if (index === 0) {
      column.sortable = true;
      column.params = {
        searchType: "input"
      };
    }
    if (index === 1) {
      column.sortable = true;
      column.params = {
        searchType: "select"
      };
    }
    if (index === 2) {
      column.sortable = true;
      column.params = {
        searchType: "date"
      };
    }
    if (index === 3) {
      column.sortable = true;
      column.params = {
        searchType: "daterange"
      };
    }
    if (index === 4) {
      column.params = {
        disabled: true
      };
      column.children = [
        {
          field: \`\${column.field}_child_1\`,
          title: \`\${column.field}_child_1\`,
          children: [
            {
              field: \`\${column.field}_child_1_child_1\`,
              title: \`\${column.field}_child_1_child_1\`,
              params: { searchType: "input" }
            },
            { field: \`\${column.field}_child_1_child_2\`, title: \`\${column.field}_child_1_child_2\`, sortable: true }
          ]
        },
        { field: \`\${column.field}_child_2\`, title: \`\${column.field}_child_2\`, params: { summary: 200, summarySpan: 2 } },
        { field: \`\${column.field}_child_3\`, title: \`\${column.field}_child_3\` }
      ];
    }
    if (index === 5) {
      column.visible = false;
      column.params = {
        disabled: true
      };
    }
    return column;
  });

const recursion = (id: string, columns: MerakXTableColumn[]) => {
  const record: Record<string, any> = {};
  for (let column of columns) {
    if (!!column.field) {
      record[column.field] = \`\${column.field} \${id}\`;
    }
    if (!!column.children?.length) {
      Object.assign(record, recursion(id, column.children));
    }
  }
  return record;
};

const generateData = (length: number = 10000) =>
  Array.from({ length }).map((_, index) => {
    const payload: Record<string, any> = {
      id: \`row_\${index + 1}\`
    };
    if (index === 0) {
      payload.hasChild = true;
    }
    return { ...payload, ...recursion(payload.id, generateColumns()) };
  });

const handleQueryColumns: MerakXTableInstance["queryColumns"] = () => {
  const recursionGenerateSlots = (columns: MerakXTableColumn[]) => {
    const cols: MerakXTableColumn[] = [];
    for (let column of columns) {
      if (column.field === "column_5_child_1_child_2") {
        column.width = 200;
        column.slots = { default: "column_5_child_1_child_2_default" };
      }
      if (!!column.children?.length) {
        column.children = recursionGenerateSlots(column.children);
      }
      cols.push(column);
    }
    return cols;
  };
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        pageSize: 100,
        columns: recursionGenerateSlots(generateColumns())
      });
    }, 500);
  });
};

const handleQueryOptions: MerakXTableInstance["queryOptions"] = field => {
  console.log(field);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { value: "a", label: "选项A" },
        { value: "b", label: "选项B" },
        { value: "c", label: "选项C" }
      ]);
    }, 500);
  });
};

const handleQueryData: MerakXTableInstance["queryData"] = params => {
  let start: number = 0,
    end: number = 0;
  const { page, sorts, filters, from } = params;
  console.log(page, sorts, filters, from);
  if (!!page) {
    const { currentPage, pageSize } = page;
    start = (currentPage - 1) * pageSize;
    end = start + pageSize;
  }
  const data = generateData().slice(start, end);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        total: 10000,
        currentPage: params.page?.currentPage ?? 1,
        list: data
      });
    }, 1000);
  });
};

const handleConfigChange: MerakXTableInstance["onConfig-change"] = ({ pageSize, columns }) => {
  console.log(pageSize, columns);
};

const handleToolClick: MerakXTableInstance["onTool-click"] = type => {
  console.log(type);
};

const handleBatchClick: MerakXTableInstance["batchClick"] = async arg => {
  console.log(arg);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        refresh: true
      });
    }, 500);
  });
};

const handleHanlerClick: MerakXTableInstance["handlerClick"] = async params => {
  console.log(params);
  if (params.type === 'details') return false
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({});
    }, 500);
  });
};
<\/script>

<style scoped lang="scss">
.custom_row {
  word-wrap: break-word;
  white-space: wrap;
}
</style>
`),d=(t=80)=>Array.from({length:t}).map((a,l)=>{const e={field:`column_${l+1}`,title:`column_${l+1}`};return l===0&&(e.sortable=!0,e.params={searchType:"input"}),l===1&&(e.sortable=!0,e.params={searchType:"select",searchValue:"a",searchDefaultValue:"选项A"}),l===2&&(e.sortable=!0,e.params={searchType:"date"}),l===3&&(e.sortable=!0,e.params={searchType:"daterange"}),l===4&&(e.params={disabled:!0},e.children=[{field:`${e.field}_child_1`,title:`${e.field}_child_1`,children:[{field:`${e.field}_child_1_child_1`,title:`${e.field}_child_1_child_1`},{field:`${e.field}_child_1_child_2`,title:`${e.field}_child_1_child_2`,sortable:!0}]},{field:`${e.field}_child_2`,title:`${e.field}_child_2`,params:{summary:200,summarySpan:2}},{field:`${e.field}_child_3`,title:`${e.field}_child_3`}]),l===5&&(e.visible=!1,e.params={disabled:!0}),e}),_=(t,a)=>{var e;const l={};for(let o of a)o.field&&(l[o.field]=`${o.field} ${t}`),(e=o.children)!=null&&e.length&&Object.assign(l,_(t,o.children));return l},T=(t=1e4)=>Array.from({length:t}).map((a,l)=>{const e={id:`row_${l+1}`};return l===0&&(e.hasChild=!0),{...e,..._(e.id,d())}}),k=()=>{const t=a=>{var e;const l=[];for(let o of a)o.field==="column_5_child_1_child_2"&&(o.width=200,o.slots={default:"column_5_child_1_child_2_default"}),(e=o.children)!=null&&e.length&&(o.children=t(o.children)),l.push(o);return l};return new Promise(a=>{setTimeout(()=>{a({table_id:"test",version:1,pageSize:100,columns:t(d())})},500)})},C=t=>(console.log(t),new Promise(a=>{setTimeout(()=>{a([{value:"a",label:"选项A"},{value:"b",label:"选项B"},{value:"c",label:"选项C"}])},500)})),v=t=>{let a=0,l=0;const{page:e,sorts:o,filters:X,from:M}=t;if(console.log(e,o,X,M),e){const{currentPage:u,pageSize:n}=e;a=(u-1)*n,l=a+n}const P=T().slice(a,l);return new Promise(u=>{setTimeout(()=>{var n;u({total:1e4,currentPage:((n=t.page)==null?void 0:n.currentPage)??1,list:P})},1e3)})},$=({pageSize:t,columns:a})=>{console.log(t,a)},w=t=>{console.log(t)},x=async t=>(console.log(t),new Promise(a=>{setTimeout(()=>{a({refresh:!0})},500)})),S=async t=>(console.log(t),t.type==="details"?!1:new Promise(a=>{setTimeout(()=>{a(!0)},500)}));return(t,a)=>(D(),z(q,null,[E,i("div",G,[m(h(I),{ref_key:"tableRef",ref:c,"columns-by-store":d(),"row-height":60,"column-type":["index","multiple","expand","handle"],batches:[{type:"delete",text:"批量删除"}],handles:[{type:"details",text:"查看详情"},{type:"delete",text:"删除",divided:!0}],"batch-click":x,"handler-click":S,"query-columns":k,"query-options":C,"query-data":v,onConfigChange:$,onToolClick:w},{tools:r(()=>[m(h(p),{onClick:a[0]||(a[0]=l=>{var e;return(e=c.value)==null?void 0:e.reloadData()})},{default:r(()=>[g("重新请求")]),_:1}),m(h(p),{onClick:a[1]||(a[1]=l=>{var e;return(e=c.value)==null?void 0:e.reloadTable()})},{default:r(()=>[g("刷新表格")]),_:1})]),expand:r(({row:l})=>[i("div",null,"当前行数据: "+b(JSON.stringify(l)),1)]),column_5_child_1_child_2_default:r(({row:l})=>[i("div",N,"自定义插槽 用于折行 "+b(l.column_5_child_1_child_2),1)]),_:1},8,["columns-by-store"])]),Q(t.$slots,"default",{html:y.value},void 0,!0)],64))}}),te=O(H,[["__scopeId","data-v-82ebb5a9"]]);export{te as default};
